<template>
  <div>
    <!-- <input type="text" v-focus /> -->
    <button @click="increment" v-why.aaaa.bbbb="'chanqi'">{{ count }}</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  //局部指令
  directives: {
    why: {
      created(el,bindings,vnode, preVnode) {
        // console.log("created-why", el, bindings, vnode, preVnode);
        console.log(bindings.value, bindings.modifiers);
      },
      beforeMount() {
        console.log("beforeMount-why");
      },
      mounted() {
        console.log("mounted-why");
      },
      beforeUpdate() {
        console.log("beforeUpdate-why");
      },
      updated() {
        console.log("updated-why");
      },
      beforeUnmount() {
        console.log("beforeUnmount-why");
      },
      unMounted() {
        console.log("unMounted-why");
      },
    },
  },
  setup() {
    let count = ref(0);
    const increment = () => count.value++;
    return {
      count,
      increment,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>